<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";

import { vulScan } from "@/api/task";
import { message } from "@/utils/message";
import { copyTextToClipboard } from "@pureadmin/utils";
defineOptions({
  name: "Refund",
});

const dataList = ref([
  {
    name: "财务中心",
    num: 900,
    amount: 900,
  },
  {
    name: "营销分部",
    num: 800,
    amount: 800,
  },
  {
    name: "安全部",
    num: 700,
    amount: 700,
  },
  {
    name: "安全中心",
    num: 600,
    amount: 600,
  },
  {
    name: "研发中心",
    num: 500,
    amount: 500,
  },
  {
    name: "调研中心",
    num: 500,
    amount: 500,
  },
  {
    name: "信息中心",
    num: 500,
    amount: 500,
  },
]);

// watch(showAddHardwareDialog, (newVal, oldVal) => {
//   // resetAddTaskForm();
// });

onMounted(() => {});
</script>

<template>
  <div class="rank-wrap">
    <!-- 帮我写一个根据部门数据dataList排名的列表，要求第一列有数字排序，前三名的数字背景圆形，数字内容颜色高亮区分。每一行展示该部门的数量，和金额。并且写出css -->
    <el-card class="box-card">
      <div slot="header" class="clearfix rank-header">
        <span>部门排名</span>
      </div>
      <el-table :data="dataList" style="width: 100%">
        <el-table-column prop="name" label="榜单">
          <template #default="{ row, $index }">
            <div
              :style="{ backgroundColor: $index < 3 ? '#fff' : '#F5F5F5' }"
              :class="{ 'rank-cell': $index >= 3 }"
            >
              <i
                v-if="$index < 3"
                class="medal-list-item-rank"
                :class="{
                  'medal-list-item-rank-first': $index === 0,
                  'medal-list-item-rank-second': $index === 1,
                  'medal-list-item-rank-third': $index === 2,
                }"
              />
              <span
                :style="{ color: $index < 3 ? '#fff' : '' }"
                :class="{
                  'rank-cell-num': $index >= 3,
                }"
                >{{ $index + 1 }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="部门名称" />
        <el-table-column prop="num" label="未报备资产" />
        <el-table-column prop="amount" label="总资产" />
      </el-table>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

.rank-header {
  // padding: 15px 15px;
  // font-size: 16px;
  // font-weight: 500;
  // color: #333;
  // border-bottom: 1px solid #ebeaf0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid #ebeaf0;
  // margin-top: 10px;
}

.rank-cell {
  border-radius: 10px;
  width: 20px;
  height: 20px;
  text-align: center;
}

.rank-cell-num {
  border-radius: 10px;
  width: 20px;
  height: 20px;
  text-align: center;
}

.medal-list-item-rank {
  position: absolute;
  width: 24px;
  height: 24px;
  background-image: url(../../assets/rank-CXUGzYtv.png);
  background-size: 152px 151px;
}

.medal-list-item-rank-first {
  background-position: -5px -122px;
}

.medal-list-item-rank-second {
  background-position: -64px -83px;
}
.medal-list-item-rank-third {
  background-position: -123px -5px;
}

:deep(.el-pagination) {
  justify-content: right;
  margin-top: 10px;
  margin-right: 30px;
}

.num-one {
  display: block;
  width: 100%;
  height: 30px;
  text-indent: -1000px;
  background: url(../img/rank-gold.png) no-repeat center;
  overflow: hidden;
  background-size: 41px;
}
</style>
